<template>
  <div>
    <Header2></Header2>
    <div class="specialist">
      <div class="recomendUser-banner">
        <header class="hero--standalone">
          <h2 class="hero-title">推荐作家</h2>
          <p class="hero-description">TA们是讨教号社区的知识创作者，分享者，欢迎关注</p>
        </header>
      </div>
      <div class="u-backgroundColorWhite">
        <div class="container">
          <div class="userList">
            <div class="userItem" v-for="(item,index) in specialist" :key="index">
              <img :src="item.icon" alt>
              <div class="name">{{item.realname}}</div>
              <div class="des">{{item.description}}</div>
              <div class="action"   >
                <button class="button--primary"  @click="dy(item, index)">
                  <span class="is-default">订阅专栏</span>
                </button>
                <button class="button--type" v-if="item.is_attentions == 1"  @click="qx(item, index)">
                  <span class="is-active" >取消订阅</span>
                </button>
              </div>
              <!-- <div class="action" @click="qx(item, index)" v-if="flag">
                <button class="button--type">
                  <span class="is-active" >取消订阅</span>
                </button>
              </div> -->
              <div class="mate">
                <div>最近更新</div>
                <div class="box"></div>
              </div>
              <div class="recent-update">
                <li>微博营销这一年：方法论进化、“社交×消费”场景打通、爆款案例频出</li>
                <li>微博营销这一年：方法论进化、“社交×消费”场景打通、爆款案例频出</li>
                <li>微博营销这一年：方法论进化、“社交×消费”场景打通、爆款案例频出</li>
              </div>
            </div>
          </div>
          <button class="more" @click="getMore">加载更多</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header2 from "@/common/Header/Header2";
import qs from "qs";
export default {
  data() {
    return {
      specialist: [],
      speciaIndex: 12,
      flag:false,
      i :-1,
    };
  },
  methods: {
    //获取专家列表
    getspecialist() {
      this.$axios
        .get("api/App/User/Apply/apply_get_list?limit=" + this.speciaIndex +"&member_id=" +
            this.getCookie("member_id"), )
        .then(res => {
          this.specialist = res.data.data.list;
        });
    },
    //点击加载更多专家
    getMore() {
      this.speciaIndex = this.speciaIndex + 12;
      this.$axios
        .get("api/App/User/Apply/apply_get_list?limit=" + this.speciaIndex)
        .then(res => {
          this.specialist = res.data.data.list;
        });
    },
    //订阅专家
    dy(item, index){
      console.log(item.is_attentions)
      // return;
      let param = {
        source_id: item.member_id,
        member_id: this.getCookie("member_id"),
        type: 4
      };
      this.$axios
        .post("/api/App/User/Question/web_attentions", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {  
          item.is_attentions =1
          console.log(item.is_attentions)
        });        
    },
    //取消专家
    qx(item, index){
      let param = {
        source_id: item.member_id,
        member_id: this.getCookie("member_id"),
        type: 4
      };
      this.$axios
        .post("/api/App/User/Question/web_cancel_attentions", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          item.is_attentions =0
        });
      
    }
  },
  mounted() {},
  created() {
    this.getspecialist();
  },
  components: {
    Header2
  }
};
</script>
<style lang="scss" scoped>
.specialist {
  width: 100%;
  height: auto;
  margin: 0 auto;
  .recomendUser-banner {
    height: 190px;
    background-image: url(../../assets/images/author-banner.jpg);
    background-size: cover;
    background-position: 50%;
    .hero--standalone {
      width: 1200px;
      margin: 0 auto;
      padding: 40px 0 60px;
      color: #fff;
      text-align: center;
      .hero-title {
        font-size: 24px;
        margin-bottom: 15px;
      }
    }
  }
  .u-backgroundColorWhite {
    background: #fff;
    padding-bottom: 40px;
    .container {
      width: 1200px;
      margin: 0 auto;
      .userList {
        text-align: center;
        .userItem {
          display: inline-block;
          vertical-align: top;
          width: 300px;
          border: 1px solid #eee;
          height: 320px;
          margin-left: 20px;
          margin-right: 20px;
          margin-top: 80px;
          padding-left: 20px;
          padding-right: 20px;
          box-sizing: border-box;
          line-height: 1.8;
          border-radius: 5px;
          transition: 0.5s;
          
          img {
            background-color: #fff;
            border: 1px solid #f0f0f0;
            display: inline-block;
            height: 80px;
            margin: -43px 0 10px;
            width: 80px;
            border-radius: 100%;
            padding: 3px;
          }
          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .des {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 10px;
            font-size: 14px;
            min-height: 25px;
          }
          .action {
            margin-top: 27px;
            margin-bottom: 13px;
            position: relative;
            button {
              background: transparent none repeat scroll 0 0;
              border: 1px solid rgba(0, 0, 0, 0.15);
              border-radius: 999em;
              box-sizing: border-box;
              color: rgba(0, 0, 0, 0.44);
              fill: rgba(0, 0, 0, 0.44);
              cursor: pointer;
              display: inline-block;
              font-feature-settings: "liga";
              font-size: 14px;
              height: 37px;
              line-height: 36px;
              letter-spacing: 0;
              padding: 0 16px;
              position: relative;
              text-align: center;
              white-space: nowrap;
              outline: none;
            }
            .button--primary {
              color: #5079b7;
              border-color: #5079b7;
              
              &:hover {
                background-color: #5079b7;
                color: #fff;
              }
            }
            .button--type {
              background-color: #5079b7;
              color: #fff;
              position: absolute;
              top:0;
              left:50%;
              transform: translateX(-50%);
              z-index: 100;
              
            }
          }
          .mate {
            color: #969696;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            .box {
              width: 200px;
              height: 1px;
              border-bottom: 1px solid #969696;
              margin-top: 13px;
            }
          }
          .recent-update {
            list-style: none;
            padding-top: 10px;
            li {
              font-size: 14px;
              line-height: 25px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
              color: #4a4a4a;
            }
          }
        }
      }
      .more {
        margin-top: 20px;
        border-radius: 10px;
        border: 0;
        outline: none;
        background: linear-gradient(90deg, #00aeff, #3369e7);
        color: #fff;
        box-shadow: 0 2px 6px 0 rgba(51, 105, 231, 0.4);
        cursor: pointer;
      }
    }
  }
}
</style>


